import {
  createRouter,
  createWebHashHistory,
  type Router,
  type RouteRecordRaw,
} from "vue-router";
import Login from "../views/Login.vue";
// import User from '../views/User.vue';
// import Role from '../views/Role.vue';
import Home from "../views/Home.vue";
import App from "../App.vue";
import Layout from "../layouts/Layout.vue";
// import { defineAsyncComponent } from 'vue';

// https://router.vuejs.org/zh
const routes = [
  {
    path: "/",
    component: App,
    redirect: "/home",
    children: [
      {
        path: "/home",
        component: Layout,
        redirect: "/index",
        children: [
          {
            path: "/index",
            component: Home,
          },
          {
            path: "/user",
            // component: User,
            component: () => import("../views/user/User.vue"),
            name: "USER",
            meta: {
              title: "用户管理",
              icon: "user",
              type: "menu",
            },
          },
          {
            path: "/user/details",
            component: () => import("../views/user/UserDetails.vue"),
            name: "USER_DETAILS",
            meta: {
              title: "用户详情",
              icon: "user",
            },
          },
          {
            path: "/role",
            // component: Role,
            // component: defineAsyncComponent(() => import('../views/roles/Role.vue')),
            component: () => import("../views/roles/Role.vue"),
            name: "ROLE",
            meta: {
              title: "角色管理",
              icon: "role",
              type: "menu",
            },
          },
          {
            path: "/role/details/:uuid?",
            component: () => import("../views/roles/RoleForm.vue"),
            name: "ROLE_DETAILS",
            meta: {
              title: "角色详情",
              icon: "role",
            },
          },
          {
            path: "/files",
            // component: Role,
            // component: defineAsyncComponent(() => import('../views/files/Files.vue')),
            component: () => import("../views/files/Files.vue"),
            name: "FILES",
            meta: {
              title: "文件管理",
              icon: "file",
              type: "menu",
            },
          },
          {
            path: "/logs",
            // component: Role,
            component: () => import("../views/logs/Logs.vue"),
            name: "LOGS",
            meta: {
              title: "日志管理",
              icon: "log",
              type: "menu",
            },
          },
          {
            path: "/drag",
            // component: User,
            component: () => import("../views/drag/DragView.vue"),
            name: "DRAG",
            meta: {
              title: "拖拽管理",
              icon: "drag",
              type: "menu",
            },
          },
          {
            path: "/picture-classify",
            // component: Role,
            component: () => import("../views/picture/PictureClassify.vue"),
            name: "PICTURE_CLASSIFY",
            meta: {
              title: "图片类别中心",
              icon: "picture",
              type: "menu",
            },
          },
          {
            path: "/picture-center",
            // component: Role,
            component: () => import("../views/picture/PictureCenter.vue"),
            name: "PICTURE_CENTER",
            meta: {
              title: "图片集中心",
              icon: "picture",
              type: "menu",
            },
          },
          {
            path: "/records",
            // component: Role,
            component: () => import("../views/records/index.vue"),
            name: "RECORDS",
            meta: {
              title: "操作记录",
              icon: "record",
              type: "menu",
            },
          },
          {
            path: "/highlight-edit",
            // component: User,
            component: () => import("../views/edit/HightLightEdit.vue"),
            name: "HIGHTLIGHT_EDIT",
            meta: {
              title: "高亮编辑",
              icon: "highlight",
              type: "menu",
            },
          },
          {
            path: "/d3-view",
            // component: User,
            component: () => import("../views/D3/DView.vue"),
            name: "D3_VIEW",
            meta: {
              title: "d3 视图",
              icon: "d3",
              type: "menu",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    component: Login,
    meta: {
      title: "登录",
    },
  },
] as Readonly<RouteRecordRaw[]>;

const history = createWebHashHistory();

/**
 * 路由配置
 */
const router: Router = createRouter({
  history,
  // history: createWebHashHistory("#app"), // hash模式
  routes,
  scrollBehavior() {
    return {
      top: 0,
      left: 0,
      behavior: "smooth",
    };
  },
  sensitive: true, // 路由大小写敏感
  // strict: true,
});

// console.log('router',router);

/**
 * 添加路由
 */
// router.addRoute({
//   path: '/test',
//   component: () => import('../views/picture/PictureCenter.vue'),
//   name: 'TEST',
//   meta: {
//     title: 'Test'
//   },
// })

// console.log('routers',router.getRoutes());

/**
 * 路由守卫
 */
router.beforeEach((a) => {
  // console.log('a', a);
});

export default router;
